import React from 'react';
import { Layout as AntLayout, Menu, Input, Avatar, Button } from 'antd';
import { 
  SearchOutlined, 
  UserOutlined, 
  BookOutlined, 
  StarOutlined, 
  AppstoreOutlined, 
  LogoutOutlined 
} from '@ant-design/icons';
import { useAuth } from '../hooks/useAuth';
import { useNavigation } from '../hooks/useNavigation';
import Footer from '../components/Footer';
import './Layout.scss';

const { Header: AntHeader, Content, Footer: AntFooter } = AntLayout;

interface LayoutProps {
  children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const { currentUser, login, logout } = useAuth();
  const { activeMenu } = useNavigation();

  // 登录处理
  const handleLogin = async () => {
    const username = 'user' + Math.floor(Math.random() * 1000);
    await login(username);
  };

  const menuItems = [
     {
      key: 'home',
      label: '首页',
      icon: <BookOutlined />,
     },
    {
      key: 'bookmark',
      label: '网页收藏',
      icon: <BookOutlined />,
      children: [
        { key: 'bookmark-1', label: '收藏夹 1' },
        { key: 'bookmark-2', label: '收藏夹 2' },
        { key: 'bookmark-3', label: '收藏夹 3' },
      ],
    },
    {
      key: 'favorites',
      label: '个人收藏',
      icon: <StarOutlined />,
      children: [
        { key: 'favorites-1', label: '我的收藏' },
        { key: 'favorites-2', label: '最近访问' },
        { key: 'favorites-3', label: '热门推荐' },
      ],
    },
    {
      key: 'software',
      label: '常用软件',
      icon: <AppstoreOutlined />,
      children: [
        { key: 'software-1', label: '开发工具' },
        { key: 'software-2', label: '办公软件' },
        { key: 'software-3', label: '娱乐软件' },
      ],
    },
    {
      key: 'blog',
      label: '个人博客',
      icon: <StarOutlined />,
      children: [
        { key: 'blog-1', label: '所有文章' },
        { key: 'blog-2', label: '技术文章' },
        { key: 'blog-3', label: '生活随笔' },
      ],
    },
  ];

  // 处理菜单点击
  const handleMenuClick = (e: any) => {
    const { key } = e;
    
    if (key.includes('-')) {
      // 子菜单点击
      const [parentKey, subKey] = key.split('-');
      // 这里可以处理子菜单的导航逻辑
      window.location.href = `/${parentKey}/${subKey}`;
    } else {
      // 一级菜单点击
      if (key === 'home') {
        window.location.href = '/';
      } else {
        window.location.href = `/${key}`;
      }
    }
  };

  return (
    <AntLayout className="app-layout">
      <AntHeader className="app-header">
        <div className="header-container">
          {/* 左侧菜单 */}
          <Menu 
            mode="horizontal" 
            className="main-menu"
            style={{ flex: 1, borderBottom: 0 }}
            selectedKeys={activeMenu ? [activeMenu] : []}
            items={menuItems}
            onClick={handleMenuClick}
            triggerSubMenuAction="hover"
          />
          
          {/* 右侧功能区 */}
          <div className="header-right">
            {/* 搜索框 */}
            <div className="search-box">
              <Input
                prefix={<SearchOutlined />}
                placeholder="搜索..."
                style={{ width: 200 }}
              />
            </div>
            
            {/* 用户操作 */}
            <div className="user-actions">
              {currentUser ? (
                <>
                  <Avatar icon={<UserOutlined />}>
                    {currentUser.username.charAt(0).toUpperCase()}
                  </Avatar>
                  <Button 
                    type="text" 
                    icon={<LogoutOutlined />} 
                    onClick={logout}
                    style={{ marginLeft: 8 }}>
                    退出
                  </Button>
                </>
              ) : (
                <Button type="primary" onClick={handleLogin}>
                  登录
                </Button>
              )}
            </div>
          </div>
        </div>
      </AntHeader>

      <Content className="app-content">
        {children}
      </Content>

      <AntFooter className="app-footer">
        <Footer companyName="我的应用" />
      </AntFooter>
    </AntLayout>
  );
};

export default Layout;
